<template>
  <view class="detail-container">
    <!-- 顶部图片轮播区域 -->
    <swiper class="image-swiper" circular :indicator-dots="journalData && journalData.img_urls && journalData.img_urls.length > 1"
      indicator-color="rgba(255, 255, 255, 0.4)" indicator-active-color="#FFFFFF" :current="currentImageIndex"
      @change="onSwiperChange">
      <swiper-item v-for="(photo, index) in journalData.img_urls" :key="index">
        <image :src="photo" mode="aspectFill" class="swiper-image" />
      </swiper-item>
      <swiper-item v-if="!journalData || !journalData.img_urls || journalData.img_urls.length === 0">
        <image src="https://images.unsplash.com/photo-1528164344705-47542687000d" mode="aspectFill"
          class="swiper-image" />
      </swiper-item>
    </swiper>

    <!-- 图片页码指示器 -->
    <view v-if="journalData && journalData.img_urls && journalData.img_urls.length > 1" class="image-counter">
      {{ currentImageIndex + 1 }}/{{ journalData.img_urls.length }}
    </view>

    <!-- 返回按钮 -->
    <view class="back-button" @click="goBack">
      <text class="back-icon">〈</text>
    </view>

    <!-- 内容区域 -->
    <view class="content-area">
      <view class="header-info">
        <view class="user-info">
          <image class="avatar" src="/static/default-avatar.png" />
          <view class="user-details">
            <text class="username">游记作者</text>
            <text class="post-date">{{ formatDate(journalData.created_at) }}</text>
          </view>
        </view>
        <button class="edit-button" @click="goEdit">编辑</button>
      </view>

      <view class="journal-content">
        <text class="journal-title">{{ journalData.title }}</text>
        <text class="journal-text">{{ journalData.report_content }}</text>
      </view>

      <!-- <view class="tag-list">
        <view class="tag-item">#莒县游记</view>
        <view class="tag-item">#文化之旅</view>
        <view class="tag-item">#旅行打卡</view>
      </view> -->

      <!-- <view class="location-info">
        <text class="location-icon">📍</text>
        <text class="location-name">{{ journalData.location }}</text>
      </view> -->
    </view>

    <!-- 底部操作栏 -->
    <view class="action-bar">
      <view class="action-left">
        <!-- <view class="action-item">
          <text class="action-icon">♥</text>
          <text class="action-count">{{ journalData.likes }}</text>
        </view>
        <view class="action-item">
          <text class="action-icon">💬</text>
          <text class="action-count">{{ journalData.comments }}</text>
        </view> -->
        <!-- <view class="action-item">
          <text class="action-icon">⋮</text>
        </view> -->
      </view>
      <view class="action-right">
        <button class="share-button" open-type="share">
          <text class="share-icon">分享</text>
        </button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { onShow } from '@dcloudio/uni-app'
const journalData = ref({});
const currentImageIndex = ref(0);
var travel_id = "";
onMounted(() => { // 获取路由参数
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const options = currentPage.options || {};
  travel_id = options.travel_id;
  if (travel_id) {
    loadJournalDataById(travel_id);
  } else {
    uni.showToast({
      title: '游记ID不存在或已删除', 
      icon: 'none'
    });
  }
});

onShow(() => {
  console.log("onShow");
  if(travel_id) {
    loadJournalDataById(travel_id);
  }
})

function goEdit() {
  uni.navigateTo({
    url: '/pages/youji/edit?travel_id=' + travel_id
  });
}

function loadJournalDataById(travel_id) {
/**
  "data": {
"id": 11,
"user_id": "",
"report_content": "【莒县24h｜在山东小城遇见慢时光】  \n\n清晨的莒县像被阳光吻过的水墨画——古城墙的砖缝里钻出倔强的小野花，浮来山脚下卖豆腐脑的大爷掀开木桶，白雾混着豆香飘进青石板巷弄。我蹲在千年银杏树下数它的皱纹，风一吹，金黄的叶子就簌簌落进我的拿铁里。  \n\n午后溜达到莒国古城，朱漆廊柱下穿汉服的小姐姐们正在拍短视频，无人机掠过屋脊时惊起一群麻雀。最惊喜是转角遇到现烤的周姑子戏饼，焦糖色的糖壳咔嚓裂开，芝麻馅烫得直哈气也舍不得吐。  \n\n当暮色给沭河披上金纱，当地人拎着小马扎到河边钓鱼。有个戴草帽的大叔递给我半块烤地瓜：\"尝尝，俺们这儿土里长的比蜜甜！\"  \n\n原来慢生活不用去江南找，山东小城的烟火气里藏着最治愈的浪漫～  \n（评论区蹲一个你的宝藏小城故事✨）",
"img_urls": [],
"is_active": true,
"created_at": "2025-04-10T11:36:04",
"updated_at": "2025-04-10T11:36:04"
}
  */
  uni.showLoading({
      title: 'Loading...'
    });
  uni.request({
  url: `https://tushuoit.com/api/ju/travel_share/get_travel/by_id?id=${travel_id}`,
  method: 'GET',
  success: (res) => {
    console.log(res);
    journalData.value = res.data.data;
    uni.hideLoading();
  },
  fail: (err) => {
    console.log(err);
    uni.hideLoading();
    uni.showToast({
      title: '加载游记失败',
      icon: 'none'
    });
  }
  });

}
  // 获取路由参数
function loadJournalData() {
  // 获取路由参数
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const options = currentPage.options || {};

  if (options.journalData) {
    try {
      // 解析传递过来的数据
      const decodedData = JSON.parse(decodeURIComponent(options.journalData));
      journalData.value = decodedData;
    } catch (e) {
      console.error('解析游记数据失败', e);
      uni.showToast({
        title: '加载游记失败',
        icon: 'none'
      });
    }
  } else {
    // 如果没有传递数据，使用默认数据
    journalData.value = {
      title: '探寻莒县之美',
      content: '莒县，这座历史悠久的城市，处处散发着古老的文化气息。来到莒县的第一站，便是莒国故城遗址。站在这片土地上，仿佛能感受到两千多年前莒国的繁华。\n\n下午前往浮来山，山中古木参天，空气清新。登上山顶，俯瞰整个莒县城区，景色壮观。山间的古寺庙宇，香火不断，游人如织。\n\n晚上品尝了莒县的特色美食，莒县煎饼外酥里嫩，莒县豆腐鲜嫩可口，令人回味无穷。\n\n这次莒县之行，收获颇丰。不仅领略了自然风光，更深入了解了莒县的历史文化，期待下次再来！',
      photos: [
        'https://images.unsplash.com/photo-1528164344705-47542687000d',
        'https://images.unsplash.com/photo-1542262867-c4b517b92db3'
      ],
      createTime: new Date().toISOString(),
      location: '山东省莒县',
      likes: 86,
      comments: 24,
      shares: 12
    };
  }
}

function onSwiperChange(e) {
  currentImageIndex.value = e.detail.current;
}

function goBack() {
  uni.navigateBack();
}

function formatDate(dateString) {
  const date = new Date(dateString);
  return `${date.getMonth() + 1}月${date.getDate()}日`;
}


</script>

<style>
.detail-container {
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #f8f0e3;
  display: flex;
  flex-direction: column;
}

.edit-button {
  background-color: #f8f0e3;
  color: red;
  font-size: 14px;
  padding: 0 15px;
  height: 30px;
  line-height: 30px;
  border-radius: 15px;
  margin: 0;
}

/* 图片轮播区域 */
.image-swiper {
  width: 100%;
  height: 240px;
  position: relative;
}

.swiper-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-counter {
  position: absolute;
  right: 15px;
  top: 180px;
  transform: translateY(50%);
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
  border-radius: 12px;
  padding: 4px 8px;
  font-size: 12px;
  z-index: 10;
}

.back-button {
  position: absolute;
  left: 15px;
  top: 40px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.back-icon {
  font-size: 18px;
  font-weight: bold;
}

/* 内容区域 */
.content-area {
  flex: 1;
  background-color: white;
  border-radius: 20px 20px 0 0;
  margin-top: -20px;
  padding: 20px;
  position: relative;
  overflow-y: auto;
}

.header-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.user-info {
  display: flex;
  align-items: center;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

.user-details {
  display: flex;
  flex-direction: column;
}

.username {
  font-size: 15px;
  font-weight: bold;
  color: #333;
}

.post-date {
  font-size: 12px;
  color: #999;
}

.follow-button {
  background-color: #ff2442;
  color: white;
  font-size: 14px;
  padding: 0 15px;
  height: 30px;
  line-height: 30px;
  border-radius: 15px;
  margin: 0;
}

.journal-content {
  margin-bottom: 15px;
}

.journal-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
  display: block;
}

.journal-text {
  font-size: 15px;
  color: #333;
  line-height: 1.6;
  display: block;
  margin-bottom: 15px;
  padding-bottom: 100rpx;
  white-space: pre-wrap;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 15px;
}

.tag-item {
  background-color: #f4f4f4;
  color: #ff2442;
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 15px;
  margin-right: 8px;
  margin-bottom: 8px;
}

.location-info {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.location-icon {
  font-size: 16px;
  margin-right: 5px;
}

.location-name {
  font-size: 13px;
  color: #666;
}

/* 底部操作栏 */
.action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
  border-top: 1px solid #f0f0f0;
}

.action-left {
  display: flex;
  align-items: center;
}

.action-item {
  display: flex;
  align-items: center;
  
}

.action-icon {
  font-size: 20px;
  color: #333;
  margin-right: 5px;
}

.action-count {
  font-size: 14px;
  color: #333;
}

.share-button {
  background-color: #8b6b4a;
  color: white;
  font-size: 14px;
  padding: 0 15px;
  height: 32px;
  line-height: 32px;
  border-radius: 16px;
  margin: 0;
}

.share-icon {
  font-size: 14px;
}
</style>
